<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>冉子硕骑北极熊</title>
  <style>
    body {
      margin: 0;
      background-color: #e0f7fa;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .runner {
      position: relative;
      width: 100px;
      height: 200px;
      animation: jump 0.6s infinite alternate;
    }

    /* 名字 */
    .name-tag {
      position: absolute;
      top: -40px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #000;
    }

    /* 头 */
    .head {
      width: 40px;
      height: 40px;
      background: #fdd835;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 30px;
    }

    /* 身体 */
    .body {
      width: 20px;
      height: 50px;
      background: #4caf50;
      position: absolute;
      top: 40px;
      left: 40px;
    }

    /* 手臂 */
    .arm-left, .arm-right {
      width: 10px;
      height: 40px;
      background: #8d6e63;
      position: absolute;
      top: 40px;
      transform-origin: top center;
    }

    .arm-left {
      left: 20px;
      animation: arm-left-swing 0.6s infinite alternate;
    }

    .arm-right {
      left: 70px;
      animation: arm-right-swing 0.6s infinite alternate;
    }

    /* 腿 */
    .leg-left, .leg-right {
      width: 10px;
      height: 50px;
      background: #6d4c41;
      position: absolute;
      top: 90px;
      transform-origin: top center;
    }

    .leg-left {
      left: 35px;
      animation: leg-left-run 0.01s infinite alternate;
    }

    .leg-right {
      left: 55px;
      animation: leg-right-run 0.01s infinite alternate;
    }

    /* 北极熊（简化卡通） */
    .bear {
      position: absolute;
      bottom: -60px;
      left: 5px;
      width: 90px;
      height: 50px;
      background: white;
      border-radius: 50px;
      border: 2px solid #ccc;
    }

    .bear::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      width: 20px;
      height: 20px;
      background: #ccc;
      border-radius: 50%;
    }

    .bear::after {
      content: '';
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      background: #ccc;
      border-radius: 50%;
    }

    /* 动画关键帧 */
    @keyframes arm-left-swing {
      0% { transform: rotate(-30deg); }
      100% { transform: rotate(30deg); }
    }

    @keyframes arm-right-swing {
      0% { transform: rotate(30deg); }
      100% { transform: rotate(-30deg); }
    }

    @keyframes leg-left-run {
      0% { transform: rotate(30deg); }
      100% { transform: rotate(-30deg); }
    }

    @keyframes leg-right-run {
      0% { transform: rotate(-30deg); }
      100% { transform: rotate(30deg); }
    }

    @keyframes jump {
      0% { transform: translateY(0); }
      100% { transform: translateY(-10px); }
    }
  </style>
</head>
<body>
  <div class="runner">
    <div class="name-tag">冉子硕</div>
    <div class="head"></div>
    <div class="body"></div>
    <div class="arm-left"></div>
    <div class="arm-right"></div>
    <div class="leg-left"></div>
    <div class="leg-right"></div>
    <div class="bear"></div>
  </div>
</body>
</html>
